﻿/// <reference path="_references.js" />
$(document).ready(function () {

    //Makes Players inactive
    makeMeInactive();

    //Defines that the div with the ID "dialog-gameOver" is a jQuery dialog and doesn't show in the beginning
    $("#dialog-gameOver").dialog({
        autoOpen: false
    });

    //An instance of connect4GameHub
    var gameHub = $.connection.connect4GameHub;
    var myUserId;
    var currentGameId;

    var player = "yellow";
    //Changes color of the tokens
    var togglePlayer = function () {
        if (player === "yellow") {
            return "red";
        }
        else {
            return "yellow";
        }
    };

    //Makes player 1 active in the beginning of the game
    gameHub.client.startGame = function () {
        if (myUserId == 1) {
            makeMeActive();
            $("#whosTurn").html("<strong>Þú átt að byrja</strong>");
        }
        else {
            $("#whosTurn").html("<strong>Þú ert leikmaður 2");
        }
    }

    //Let the user know what his player id is
    gameHub.client.sendUserId = function (userId) {
        myUserId = userId;
    }

    //Announces whos turn it is
    gameHub.client.tellWhosTurn = function (playerId, nextPlayerId) {
        var whosTurnDiv = $("#whosTurn");
        if (nextPlayerId == myUserId) {
            whosTurnDiv.html("Þú átt leik!");
            makeMeActive();
        }
        else {
            whosTurnDiv.html("Leikmaður " + nextPlayerId + " á að gera!");
        }
    }

    //calls setPiece on the server side
    $(".arrowLink").click(function () {
        gameHub.server.setPiece(currentGameId, myUserId, this.id);
        makeMeInactive();
    });

    //Puts token of the right color in the grid
    gameHub.client.putPiece = function (clicked_id, playerId, index) {

        document.getElementById(index).innerHTML = '<span class=' + player + '></span>';
        player = togglePlayer();

        if (playerId != myUserId) {
            makeMeActive();
        }
    }

    //Starts the connection
    $.connection.hub.start().done(function () {
        //Gets group ID from the URL
        var url = document.URL;
        currentGameId = url.substr(url.lastIndexOf("/") + 1);
        //Join the game
        gameHub.server.join(currentGameId);

    }).fail(function () {
        alert("ERROR");
    });

    //Announces who's the winner
    gameHub.client.sendWinner = function (playerId) {
        makeMeInactive();
        $("#whosTurn").html("");
        if (playerId == myUserId) {
            $("#winner").html("<strong>Þú hefur unnið leikinn!</strong>");
            $("#dialog-gameOver").dialog("open");
        }
        else {
            $("#winner").html("<strong>Leikmaður " + playerId + " er sigurvegari</strong>");
            $("#dialog-gameOver").dialog("open");
        }
    }

    //Announces if it's a tie
    gameHub.client.noWinner = function () {
        makeMeInactive();
        $("#whosTurn").html("");
        $("#winner").html("<strong>Jafntefli!</strong>");
        $("#dialog-gameOver").dialog("open");
    }

    //Adds a message to the message-textbox
    gameHub.client.addMessage = function (myUserName, message) {
        var messages = $('#messages');
        messages.html(messages.html() + '<strong>' + myUserName + ":</strong> " + message + "<br />");
        messages.scrollTop(messages[0].scrollHeight);
    }

    //Send message
    $("#broadcast").click(function () {
        if ($('#msg').val() === '') {
            $('#msg').val('').focus();
        }
        else {
            gameHub.server.send($('#msg').val(), currentGameId, myUserId);
            $('#msg').val('').focus();
        }
    });
    $("#broadcast").keyup(function () {
        if (event.which == 13) {
            if ($('#msg').val() === '') {
                $('#msg').val('').focus();
            }
            else {
                gameHub.server.send($('#msg').val(), currentGameId, myUserId);
                $('#msg').val('').focus();
            }
        }
    });

});

//Makes the player active by showing the arrows to click
function makeMeActive() {
    $(".arrowLink").css('visibility', 'visible');
}

//Makes the player inactive by hiding the arrows to click
function makeMeInactive() {
    $(".arrowLink").css('visibility', 'hidden');
}
